import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:short_drama/models/home_tab_model.dart';
import 'package:short_drama/pages/home/home_list/home_list.dart';
import 'package:short_drama/pages/home/home_viewmodel.dart';
import 'package:short_drama/views/keep_alive_wrapper.dart';
import 'package:short_drama/pages/home/message.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final HomeViewModel viewModel = Get.put(HomeViewModel());
  final PageController _pageController = PageController();

  @override
  void initState() {
    super.initState();
    viewModel.queryTabs();
    viewModel.queryMsgCount();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: [
          Image.asset(
            'assets/images/bg_home.png',
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.fill,
          ),
          Column(children: [_navBar(), _tabItems(), _tabContent()]),
        ],
      ),
    );
  }

  Widget _navBar() {
    return Container(
      height: 88,
      color: const Color(0x06ffffff),
      padding: EdgeInsets.only(top: 30, left: 16, right: 16),
      child: Row(
        children: [
          Text(
            '米乐同频',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          Spacer(),
          GestureDetector(
            onTap: () {
              Get.to(() => MessagePage());
            },
            child: Stack(
              alignment: AlignmentDirectional.topEnd,
              children: [
                Image.asset(
                  'assets/images/icon_home_notify.png',
                  width: 20.5,
                  fit: BoxFit.fitWidth,
                ),
                Obx(
                  () => Visibility(
                    visible: viewModel.msgCount.value > 0,
                    child: Positioned(
                      top: -2,
                      right: -2,
                      child: Container(
                        alignment: Alignment.center,
                        width: 12,
                        height: 12,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Color(0xffF9604e),
                        ),
                        // child: Text(
                        //   '3',
                        //   style: TextStyle(color: Colors.white, fontSize: 8),
                        // ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _tabItems() {
    return SizedBox(
      height: 58,
      child: Obx(
        () => ListView.builder(
          padding: EdgeInsets.only(left: 16),
          scrollDirection: Axis.horizontal,
          itemCount: viewModel.tabs.length,
          itemBuilder: (context, index) {
            return Obx(
              () => GestureDetector(
                onTap: () {
                  viewModel.titleIndex.value = index;
                  _pageController.jumpToPage(index);
                },
                child: Center(
                  child: Container(
                    height: 28,
                    padding: EdgeInsets.only(left: 18, right: 18),
                    margin: EdgeInsets.only(right: 8),
                    decoration: BoxDecoration(
                      color:
                          viewModel.titleIndex.value == index
                              ? Color.fromARGB(32, 255, 255, 255)
                              : Colors.transparent,
                      borderRadius: BorderRadius.circular(14),
                    ),
                    child: Text(
                      (viewModel.tabs[index] as HomeTabModel).name,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 17,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _tabContent() {
    return Expanded(
      child: Obx(
        () => PageView(
          controller: _pageController,
          physics: const NeverScrollableScrollPhysics(),
          children: [
            ...viewModel.tabs.map((tab) {
              return KeepAliveWrapper(
                child: HomeListPage((tab as HomeTabModel).value),
              );
            }),
          ],
        ),
      ),
    );
  }
}
